{% extends "base.html" %}
{% import "_macros.html" as macros %}

{% block title %}Welcome - {{ user.username }}{% endblock %}

{% block page_content %}


    <!-- diagram start -->

    <div class="page-header">

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<h2>Web Diagram from Script</h2>
    <!--
        git clone https://github.com/magjac/d3-graphviz
        npm install d3-graphviz
    -->
    <form action="/upload" method="post" enctype="multipart/form-data">
            <div class="form-inline">
                {{ upload_form.csrf_token }}
                <label for="script_file" class="col-sm-2">Diagram Script: </label>
                <div class="form-group col-sm-4">{{ upload_form.script_file() }}</div>
                <div class="form-group col-sm-2">{{ upload_form.submit_file() }}</div>
                <div class="form-group">help:
                    <a href="https://graphviz.gitlab.io/_pages/doc/info/lang.html" target="_blank">dot language</a>,
                    <a href="https://plantuml.com/sitemap-language-specification" target="_blank">uml language</a>
                </div>
            </div>
        </form>

    <form action='/paint' method='post'>
        {{ form.csrf_token }}
        <div class="form-group">
            {{ form.script_content() }}
        </div>
        <div class="form-group">
            <div class="form-inline">

                <label  class="form-group col-sm-2" for="diagram_name" >Diagram Name: </label>
                <div  class="form-group col-sm-4">{{ form.diagram_name() }}</div>



                <label  class="form-group col-sm-2" for="diagram_tag" >Diagram Tag: </label>
                <div  class="form-group col-sm-4">{{ form.diagram_tag() }}</div>


            </div>
        </div>



        <div class="form-group">
        <div class="form-inline">

          <label for="diagram_type" class="col-sm-2">Diagram Type: </label>
            <div class="form-group col-sm-4">{{ form.diagram_type() }}</div>
            <div class="form-group">{{ form.submit_button() }}</div>
            <div class="form-group">{{ form.save_button() }}</div>
        </div>
        </div>
        {{ form.diagram_path() }}
        {{ form.diagram_content() | safe }}
        {{ form.diagram_id() | safe }}
      </form>

        <div class="form-group" lass="col-sm-10">
            <div id="graph" style="text-align: center;"></div>
        </div>

        {% if form.diagram_path.data is not none and "png" in form.diagram_path.data %}
             <img src="/static/{{ form.diagram_path.data }}?{{ range(1, 1000) | random }}"/>

        {% endif %}


        {% if form.diagram_content.data is not none %}

            {% if 'digraph' in form.diagram_content.data %}
        <script>
        var dot_script = '{{ form.diagram_content.data | safe }}'
        console.log(dot_script)
        d3.select("#graph").graphviz()
            .fade(false)
            .renderDot(dot_script);
        </script>
                {% else  %}
                <div class="form-group">
                  <textarea rows="10" cols="120" class="textbox">{{ form.diagram_content.data }}</textarea>
                </div>
            {% endif %}
        {% endif %}
      <hr/>


</div> <!-- diagram end -->
{% if pagination %}
<div class="pagination">
    {{ macros.pagination_widget(pagination, '.user', username=user.username) }}
</div>
{% endif %}
{% endblock %}
